<!--suppress ALL -->
<template>
  <div v-loading="loading">
    <el-card :body-style="{padding:'10px'}" style="min-height: 650px;background-color: #f3f3f3" >
      <!------------------------------按钮 ----------------------up ------------------->
      <el-row :gutter="24" >
        <el-col :span="21">
          <el-button type="info" @click="goBack">返回</el-button>
        </el-col>
        <el-col :span="3">
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" @click="toLast" />
            <el-button type="primary" icon="el-icon-arrow-right" @click="toNext" />
          </el-button-group>
        </el-col>
      </el-row>
      <!-------------------------------按钮 ----------------------up ------------------->
      <el-dialog :visible.sync="editVisible" width="85%" :close-on-click-modal="false">
        <el-row :gutter="20" style="margin: 10px">
          <el-col :span="4">
            <el-input v-model="query.cvenname" placeholder="供应商名称" />
          </el-col>
          <el-col :span="3">
            <el-button class="hand-btn" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
          </el-col>
        </el-row>
        <el-table
          :data="page.content"
          tooltip-effect="dark"
          border
          style="width: 100%;"
          @row-click="selTable"
        >
          <el-table-column
            type="index"
            label="项次"
            width="50"
          />
          <el-table-column
            prop="cvenname"
            label="供应商名称"
          />
          <el-table-column
            prop="cvenabbname"
            label="供应商简称"
          />
          <el-table-column
            prop="cvenaddress"
            label="供应商地址"
          />
          <el-table-column
            prop="cvenphone"
            label="电话号码"
          />
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="page.totalElements"
            @current-change="handlePageChange"
          />
        </div>
      </el-dialog>
      <div>
        <el-descriptions border style="margin-bottom: 5px">
          <el-descriptions-item label="供应商编码" label-style="width:8%" content-style="width:23%">{{ form.cvencode }}</el-descriptions-item>
          <el-descriptions-item label="供应商名称" label-style="width:8%" content-style="width:23%">{{ form.cvenname }}</el-descriptions-item>
          <el-descriptions-item label="供应商地址" label-style="width:8%" content-style="width:23%">{{ form.cvenabbname }}</el-descriptions-item>
          <el-descriptions-item label="供应商电话" label-style="width:8%" content-style="width:23%">{{ form.cvenphone }}</el-descriptions-item>
          <el-descriptions-item label="备注" label-style="width:8%" content-style="width:23%">
            {{form.remark}}
          </el-descriptions-item>
        </el-descriptions>
        <!-------------------------------按钮 ----------------------up ------------------->
        <el-card style="min-height: 500px">
          <el-card  v-for="item,index in form.entitys">
            <el-row :gutter="24">
              <el-col :span="5" class="avatar-uploader" style="width: 180px;">
                <img v-if="item.imgUrl" :src="fileURL + item.imgUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-col>
              <el-col :span="15">
                <el-descriptions border style="margin-bottom: 5px;">
                  <el-descriptions-item label="证件名称"span="3" label-style="width:8%" content-style="width:23%">{{ item.postname }}</el-descriptions-item>
                  <el-descriptions-item label="证件编码" span="3" label-style="width:8%" content-style="width:23%">{{ item.postcode }}</el-descriptions-item>
                  <el-descriptions-item label="日期" span="3" label-style="width:8%" content-style="width:23%">{{ item.sdate }} 至 {{ item.edate }}</el-descriptions-item>
                  <el-descriptions-item label="备注" span="3" label-style="width:8%" content-style="width:23%">{{ item.remark }}</el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
          </el-card>
        </el-card>
      </div>
    </el-card>
    <el-dialog :visible.sync="open" width="60%" :close-on-click-modal="false">
      <el-form v-model="formEntity" label-position="right" label-width="100px" style="margin-bottom: 50px">
        <el-form-item label="证件名称">
          <el-input v-model="formEntity.postname" >
          </el-input>
        </el-form-item>
        <el-form-item label="证件编码">
          <el-input v-model="formEntity.postcode" >
          </el-input>
        </el-form-item>
        <el-form-item label="起始日期">
          <el-date-picker
            v-model="formEntity.sdate"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
          --
          <el-date-picker
            v-model="formEntity.edate"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formEntity.remark" >
          </el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            :action="fileUploadURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="formEntity.imgUrl" :src="fileURL + formEntity.imgUrl" class="avatar" :alt="formEntity.imgUrl">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div style="float: right;margin-right: 20px">
          <el-button @click="open = false">取消</el-button>
          <el-button type="success" @click="addFormEntity">添加</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import { save } from '@/api/supplier'
  import { query } from '@/api/u8vendor'
  import { get } from '@/api/supplier'
  import { getSupplierByCvencode } from '@/api/supplier'
  import { getNext } from '@/api/supplier'
  import { getLast } from '@/api/supplier'
  export default {
    name: 'supplierEdit',
    data() {
      return {
        open:false,
        entityIndex:-1,
        editVisible:false,
        loading:false,
        fileURL: process.env.VUE_APP_BASE_API,
        fileUploadURL: process.env.VUE_APP_BASE_API + 'file/upload',
        query: {},
        page: {},
        formEntity:{imgUrl:''},
        form: {entitys:[{}]},
      }
    },
    created() {
      this.handleSearch()
      if (this.$route.query.id) { this.get(this.$route.query.id) }
    },
    methods: {
      // 获取 easy-mock 的模拟数据
      get(id) {
        this.loading = true
        get(id).then(res => {
          this.loading = false
          this.form = res.data.data
        })
      },
      addFormEntity(){
        this.open = false
        if(this.entityIndex == -1){
          this.form.entitys.push(this.formEntity)
        }else{
          this.form.entitys[this.entityIndex] = this.formEntity
        }
        this.entityIndex = -1
        this.formEntity = {imgUrl:''}
      },
      handleAvatarSuccess(res, file) {
        this.formEntity.imgUrl = res.data.data
        this.form.entitys = JSON.parse(JSON.stringify(this.form.entitys))
      },
      goBack() {
        this.$router.back()
      },
      saveEdit() {
        this.loading = true
        save(this.form).then(res => {
          this.loading = false
          this.$message.success(res.message)
          this.$router.push({ path: 'supplierEdit', query: { id: res.data.data.id }})
          if (this.$route.query.id) {
            this.get(this.$route.query.id)
          }
        })
      },
      handEdit(index){
        this.formEntity = this.form.entitys[index]
        if(!this.formEntity.imgUrl){
          this.formEntity.imgUrl = ''
        }
        this.entityIndex = index
        this.open = true
      },
      handDel(index){
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.form.entitys.splice(index,1)
        })
          .catch(() => {
          })
      },
      // 触发搜索按钮
      handleSearch() {
        this.$set(this.query, 'pageIndex', 1)
        this.getData()
      },
      getData() {
        this.loading = true
        query(this.query).then(res => {
          this.loading = false
          this.page = res.data.page
        })
      },
      handlePageChange(val) {
        this.$set(this.query, 'pageIndex', val)
        this.getData()
      },
      selTable(row) {
        this.editVisible = false
        getSupplierByCvencode(row.cvencode).then(res => {
          if(res.data.data){
            this.form = res.data.data
          }else{
            this.form = {cvencode : row.cvencode,cvenname : row.cvenname,cvenabbname : row.cvenabbname,
              cvenaddress : row.cvenaddress,cvenphone : row.cvenphone}
            this.form.entitys = []
          }
        })
      },
      toNext() {
        getNext(this.$route.query.id).then(res => {
          this.$router.push({ path: 'supplierView', query: { id: res.data.data }})
          if (this.$route.query.id) {
            this.get(this.$route.query.id)
          }
        })
      },
      toLast() {
        getLast(this.$route.query.id).then(res => {
          this.$router.push({ path: 'supplierView', query: { id: res.data.data }})
          if (this.$route.query.id) {
            this.get(this.$route.query.id)
          }
        })
      }
    }
  }
</script>
<style scoped>
  .avatar-uploader {
    border: 1px dashed #bbbbbb;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .handle-box {
    margin: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  .red {
    color: #ff0000;
  }
  .hand-btn {
    margin: 5px;
  }
</style>
